<script setup lang="ts">
import { onBeforeMount, ref } from "vue";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import ReCol from "@/components/ReCol";
import { getWarehouseListApi } from "@/api/warehouseApi";
const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    title: "新增",
    status: 1,
    code: "",
    name: "",
    warehouseAreaId: 0,
    warehouseId: 0,
    warehouse: "",
    goodsLocationId: 0
  })
});
const statusOptions = [
  {
    value: 1,
    label: "启用"
  },
  {
    value: 2,
    label: "禁用"
  }
];
const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}

const dataList = ref([])
const getWarehouseList = async() => {
	const res = await getWarehouseListApi({page:1,perPage: 999});
	dataList.value = res.result.list
}
onBeforeMount(() => {
    getWarehouseList();
});
defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="auto"
  >
    <el-row :gutter="30">
	  <re-col :value="12" :xs="24" :sm="24">
	    <el-form-item label="库区编码" prop="code">
	      <el-input
	        v-model="newFormInline.code"
	        clearable
			disabled
	        placeholder="请输入库区编码"
	      />
	    </el-form-item>
	  </re-col>
	  <re-col :value="12" :xs="24" :sm="24">
		  <el-form-item label="仓库名称" prop="warehouseId">
			 <el-select v-model="newFormInline.warehouseId" placeholder="请选择" style="width: 100%">
				<el-option
				  v-for="item in dataList"
				  :key="item.warehouseId"
				  :label="item.name"
				  :value="item.warehouseId"
				  :disabled="item.status===2"
				>
				  <span style="float: left">{{ item.name }}</span>
				  
				  <el-tag size="small" :type="item.status===1?'primary':'danger'" effect="light"  style="
					  float: right;
					  font-size: 13px;
						  margin-top: 7px;
					">
					{{item.status===1?'启用':'禁用'}}
				  </el-tag>
				</el-option>
			  </el-select>
		  </el-form-item>
	  </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="库区名称" prop="name">
          <el-input
            v-model="newFormInline.name"
            clearable
            placeholder="请输入库区名称"
          />
        </el-form-item>
      </re-col>
      
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="状态" prop="status">
          <el-select
            v-model="newFormInline.status"
            placeholder="请选择状态"
            class="w-full"
			clearable
          >
            <el-option
              v-for="(item, index) in statusOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>
<style scoped></style>
